<template>
  <div>
    <template v-if="uiLoading">
      <div :class="['el-skeleton', animated ? 'is-animated' : '', ]" v-bind="$attrs">
        <div v-for="i in count" :key="i">
          <slot v-if="loading" name="template">
            <el-skeleton-item class="is-first" variant="p" />
            <el-skeleton-item v-for="item in rows" :key="item" :class="{ 'el-skeleton__paragraph': true, 'is-last': item === rows && rows > 1, }" variant="p" />
          </slot>
        </div>
      </div>
    </template>
    <template v-else>
      <slot v-bind="$attrs" />
    </template>
  </div>
</template>

<script>
/**
 * https://element-plus.gitee.io/#/zh-CN/component/skeleton
 * 搬运自Element Plus
 * Skeleton 骨架屏（兼容Vue2.0）
 */
import ElSkeletonItem from '@/components/Skeleton-item'

export default {
  name: 'ElSkeleton',
  components: {
    ElSkeletonItem
  },
  props: {
    animated: {
      type: Boolean,
      default: false
    },
    count: {
      type: Number,
      default: 1
    },
    rows: {
      type: Number,
      default: 3
    },
    loading: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    uiLoading() {
      return this.loading
    }
  }
}
</script>
